pc.script.createLoadingScreen(function (app) {
    var showSplash = function () {
        // splash wrapper
        var wrapper = document.createElement('div');
        wrapper.id = 'application-splash-wrapper';
        document.body.appendChild(wrapper);

        // splash
        var splash = document.createElement('div');
        splash.id = 'application-splash';
        wrapper.appendChild(splash);
        splash.style.display = 'none';

        var logo = document.createElement('img');
        logo.id = 'bg-img';
        logo.src = 'https://cdn.jsdelivr.net/gh/glegoo/my-oss@v1.0/tb-rsq/LOGO_Loading.png';
        splash.appendChild(logo);
        logo.onload = function () {
            splash.style.display = 'block';
        };
        
        var fillDiv = document.createElement('div');
        fillDiv.id = 'fill';
        splash.appendChild(fillDiv);
        
        var logoFill = document.createElement('img');
        logoFill.src = 'https://cdn.jsdelivr.net/gh/glegoo/my-oss@v1.0/tb-rsq/LOGO_Loading02.png';
        fillDiv.appendChild(logoFill);

//         var container = document.createElement('div');
//         container.id = 'progress-bar-container';
//         splash.appendChild(container);

//         var bar = document.createElement('div');
//         bar.id = 'progress-bar';
//         container.appendChild(bar);

    };

    var hideSplash = function () {
        var splash = document.getElementById('application-splash-wrapper');
        splash.parentElement.removeChild(splash);
    };

    var setProgress = function (value) {
        var bar = document.getElementById('fill');
        if(bar) {
            value = Math.min(1, Math.max(0, value));
            bar.style.width = value * 400 + 'px';
        }
    };

    var createCss = function () {
        var css = [
            'body {',
            '    background: black;',
            '}',
            '',
            '#application-splash-wrapper {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background: url("https://cdn.jsdelivr.net/gh/glegoo/my-oss@v1.0/tb-rsq/BG.png") repeat;',
            '    background-size: contain;',
            '}',
            '',
            '#application-splash {',
            '    position: absolute;',
            '    top: calc(50% - 90px);',
            '    width: 300px;',
            '    left: calc(50% - 150px);',
            '}',
            '',
            '#application-splash #bg-img {',
            '    position: absolute;',
            '    width: 300px;',
            '}',
            '',
            '#application-splash #fill {',
            '    position: absolute;',
            '    overflow: hidden;',
            '    top: 7px;',
            '    left: 9px;',
            '    width: 0px;',
            '}',
            '',
            '#application-splash #fill img{',
            '    width: 280px;',
            '}',
        ].join('\n');

        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }

        document.head.appendChild(style);
    };

    createCss();
    showSplash();

    app.on('preload:end', function () {
        app.off('preload:progress');
    });
    app.on('preload:progress', setProgress);
    app.on('start', hideSplash);
});